<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" v-show="showSearch" :inline="true">
      <el-form-item label="文件名称" prop="originName">
        <el-input v-model="queryParams.originName" placeholder="请输入文件名称" clearable size="mini" style="width: 240px" @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="文件类型" prop="busType">
        <el-select v-model="queryParams.busType" placeholder="请选择文件类型" clearable size="mini" style="width: 240px">
          <el-option v-for="dict in dict.type.file_type" :key="dict.label" :label="dict.label" :value="dict.label" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" icon="el-icon-plus" size="mini" plain @click="handleCommand('handleCreate')">新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleCommand('handleUpdate')" v-hasPermi="['project:progress:edit']">修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleCommand('handleDelete')">删除</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>
    <el-table v-loading="loading" :data="InfoList" size="mini" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="序号" align="center" type="index" width="120"/>
      <el-table-column label="文件名称" prop="originName" />
      <el-table-column label="文件类型" prop="busType">
        <!-- <template slot-scope="scope">
          <dict-tag :options="dict.type.file_type" :value="scope.row.busType" />
        </template> -->
      </el-table-column>
      <el-table-column label="上传时间" align="center" prop="createTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleCommand('handleDownload',scope.row)">下载</el-button>
          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleCommand('handleDelete',scope.row)">删除</el-button>
          <!-- <viewer class="descimgBox"> -->
          <!-- <img style="width: 100px; margin: 5px; height: 100px" v-for="(item, index) in item.busFilesList" :key="index" :src="item.url" /> -->
          <el-button v-viewer size="mini" type="text" icon="el-icon-view" @click="handleCommand('handlePreview',scope.row)" v-if="scope.row.originName.indexOf('pdf')  !== -1 || scope.row.originName.indexOf('png') !== -1 || scope.row.originName.indexOf('jpg')  !== -1 ? true : false">预览</el-button>

          <!-- </viewer> -->
          <!-- <el-button size="mini" type="text" icon="el-icon-view" @click="handleCommand ('handlePreview',scope.row)" v-if="scope.row.originName.indexOf('pdf')  !== -1 || scope.row.originName.indexOf('png') !== -1 || scope.row.originName.indexOf('jpg')  !== -1 ? true : false">预览</el-button> -->
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
    <!-- 新增弹窗 -->
    <Create ref="create" />
    <!-- <el-image v-if="image_off" :preview-src-list="srcList">
    </el-image> -->

    <viewImage :previewImg="companyPreview" />
    <div class="viewer-dialog-box">
      <div class="img-box">
        <div class="img-wrap" v-viewer ref="viewer" v-show="imgShow">
          <img v-for="(src,index) in imageScreen" :src="imageScreen" :key="index" style="width:100%;">
          <!-- <div ref="nodata" style="text-align: center;margin-top:100px;" v-if="!imageScreen.length">暂无数据</div> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getfiles, getfileslist, delfiles } from "@/api/business/project/information";
import viewImage from '../../../components/viewImage.vue'
import Create from './create.vue'
export default {
  name: "Info",
  components: { Create, viewImage },
  dicts: ['file_type'],
  data() {
    return {
      imgShow: true,
      imageScreen: [],
      // 传递的参数
      companyPreview: {
        imgList: [], // 所有图片数组
        index: 0, // 当前点击的图片的索引
        infinite: false,  // 是否可以循环切换
        popup: false // 弹窗的显示隐藏
      },
      image_off: false,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 显示搜索条件
      showSearch: true,
      InfoList: [],
      // 总条数
      total: 0,
      // 查询参数
      queryParams: {
        tabName: null,
        mainId: null,
        originName: null,
        busType: null
      },
    };
  },
  created() {
    this.getList();
  },
  mounted() {
  },
  methods: {
    getList() {
      this.loading = true;
      this.queryParams.tabName = 'pm_projects'
      this.queryParams.mainId = this.$route.query.mainId
      getfileslist(this.queryParams).then(response => {
        this.InfoList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const id = row.id || this.ids;
      this.$modal.confirm('是否确认删除文件为"' + id + '"的数据项？').then(function () {
        return delfiles(id)
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => { });
    },
    fileupload(row) {
      let link = document.createElement('a')
      link.style.display = 'none'
      link.href = row.url
      // 生成时间戳
      // let timestamp = new Date().getTime()
      link.download = row.originName
      document.body.appendChild(link)
      link.click()
    },
    // 更多操作触发
    handleCommand(command, row) {
      switch (command) {
        case "handleCreate":
          this.$refs.create.init()
          break;
        case "handleUpdate":
          this.$refs.create.init(row ? row : { id: this.ids[0] })
          break;
        case "handleDownload":
          this.fileupload(row)
          break;
        case "handleDelete":
          this.handleDelete(row || this.ids)
          break;
        case "handlePreview":
          if (row.originName.indexOf('pdf') !== -1) {
            let test = window.open(row.url, '_blank')
            // test.onload = function () {
            //   test.document.title = '1111.pdf'
            // }
          } else {
            this.imageScreen = []
            this.imageScreen.push(row.url)
            // this.photoScreen = true
            console.log(this.$refs['viewer'])
            // 直接显示图片
            this.imgShow = false;
            const viewer = this.$refs['viewer'].$viewer
            viewer.show()
            // this.companyPreview.imgList[0] = row.url
            // this.companyPreview.popup = true
          }
          break;
        default:
          break;
      }
    },
  }
};
</script>
// style
.viewer-dialog-box {
  .img-box {
    height: 0px;
    margin: 0 auto;
    .img-wrap {
      width: 0;
      height: 0;
      position: relative;
      cursor: pointer;
      .img-wrap > div {
        height: 100%;
        width: 100%;
      }
      img {
        height: 0;
        width: 100%;
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
      }
    }
  }
}